<template>
  <div class="log">
    <div class="sa-title sa-flex sa-row-between">
      <div class="label">操作纪录</div>
      <div class="right sa-flex sa-flex-wrap">
        <el-date-picker
          v-model="filterFields.create_time"
          type="datetimerange"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="getData(1)"
          style="width: 268px"
          class="sa-m-r-8"
          :editable="false"
        >
        </el-date-picker>
        <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
      </div>
    </div>
    <div v-loading="loading">
      <el-table :data="table.data" @row-dblclick="detailRow" class="sa-table" stripe>
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column prop="id" label="ID" min-width="100"> </el-table-column>
        <el-table-column label="访问地址" min-width="160">
          <template #default="scope">
            <span class="sa-table-line-1">
              {{ scope.row.url || '-' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="描述" min-width="260">
          <template #default="scope">
            <div class="sa-table-line-1">{{ scope.row.description }}</div>
          </template>
        </el-table-column>
        <el-table-column label="请求参数" min-width="260">
          <template #default="scope">
            <el-input v-model="scope.row.params" disabled>
              <template #append>
                <span class="cursor-pointer" @click="useClip(scope.row.params)">复制</span>
              </template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="IP" min-width="140">
          <template #default="scope">
            <div class="ip">
              {{ scope.row.ip || '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" min-width="172">
          <template #default="scope">
            {{ scope.row.create_time || '-' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button class="is-link" type="primary" @click="detailRow(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="log-footer sa-flex sa-row-right">
      <sa-pagination :pageData="pageData" @updateFn="getData" />
    </div>
  </div>
</template>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import admin from '@/app/admin/api';
  import { cloneDeep, composeFilter } from '@/sheep/utils';
  import { useModal } from '@/sheep/hooks';
  import { usePagination } from '@/sheep/hooks';
  import useClip from '@/sheep/utils/clipboard.js';
  import AdminLogDetail from '../../../auth/adminLog/detail.vue';

  // 筛选
  const defaultFilterFields = {
    create_time: '',
  };
  const filterFields = ref(cloneDeep(defaultFilterFields));
  const filterOp = { create_time: 'range' };

  const loading = ref(true);

  // 列表
  const table = reactive({
    data: [],
    order: '',
    sort: '',
  });

  const { pageData } = usePagination();

  // 获取
  async function getData(page) {
    loading.value = true;
    if (page) pageData.page = page;
    const { error, data } = await admin.account.adminLog({
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...composeFilter(filterFields.value, filterOp),
      order: table.order,
      sort: table.sort,
    });
    if (error === 0) {
      table.data = data.data;
      pageData.page = data.current_page;
      pageData.list_rows = data.per_page;
      pageData.total = data.total;
    }
    loading.value = false;
  }

  function detailRow(row) {
    useModal(
      AdminLogDetail,
      {
        title: '详情',
        type: 'detail',
        detail: row,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  onMounted(() => {
    getData();
  });
</script>
<style lang="scss" scoped>
  .log {
    height: inherit;
    .right {
      height: 56px;
    }
    .sa-table {
      .ip {
        color: var(--el-color-primary);
      }
    }
    .log-footer {
      padding: 12px var(--sa-padding);
    }
  }
</style>
